<!--党员管理-->
<template>
  <el-main>
    <div>
      <!--样式div-->
        <div class="lastdiv">
          <!--头部div-->
          <div>
            <h2>党员管理</h2>
            <hr>
            <br>
          </div>
          <!--下面的div-->
          <div style="display:flex;" >
            <!--左边的div-->
            <div style="flex: 1">
              <Tree @childByValue="showshow"></Tree>
            </div>
            <!--右边的div-->
            <div style="flex: 2">
                <div>
                  <div>
                  <el-row>
                    <el-button type="primary">添加</el-button>
                    <el-button type="primary" plain @click="dialogVisible=true">修改</el-button>
                    <el-button type="primary">转出</el-button>
                  </el-row>
                  </div>
                  <!--上面整个部分-->
                  <div style="width: 100%;display: flex" >
                   <!-- <div style="text-align: center">-->
                    <div style="width: 45%;flex: 1;margin-top: 20px; margin-left: 10px" >
                      {{thisjob}}
                    </div>
                    <div style="width: 45%;flex: 1">
                      <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                      </el-input>
                      <el-radio-group v-model="radio" style="margin-top: 10px">
                        <el-radio :label="3">姓名</el-radio>
                        <el-radio :label="6">年龄</el-radio>
                        <el-radio :label="9">入党时间</el-radio>
                      </el-radio-group>
                    </div>

                  </div>
                  <el-table :data="tableData" height="400" border style="width: 100%;margin-top: 10px">
                    <el-table-column prop="name" label="姓名" ></el-table-column>
                    <el-table-column prop="age" label="年龄" ></el-table-column>
                    <el-table-column prop="borthertime" label="出生日期"></el-table-column>
                    <el-table-column prop="time" label="入党时间"></el-table-column>
                    <el-table-column prop="iphone" label="联系方式"></el-table-column>
                    <el-table-column prop="address" label="家庭住址"></el-table-column>
                  </el-table>
                </div>
                <div>

                </div>
            </div>
          </div>

          <el-dialog
            title=""
            :visible.sync="dialogVisible"
            width="815px"
            :before-close="handleClose11">
            <template>
              <el-form style="padding: 5px" :inline="true" class="el-demo" ref="giftsForm" :model="giftsForm">
                <!--1-->
                <tr style="width: 760px">
                  <td >
                    <el-form-item label="姓名">
                      <el-input v-model="giftsForm.name" style="width: 220px">{{giftsForm.name}}</el-input>
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item label="性别">
                      <el-input v-model="giftsForm.sin" style="width: 220px">{{giftsForm.sin}}</el-input>
                    </el-form-item>
                  </td>
                </tr>
                  <!--2-->
                <tr style="width: 760px">
                  <td>
                    <el-form-item label="出生日期">
                      <!-- <el-input v-model="giftsForm.birthtime" style="width: 220px">{{giftsForm.birthtime}}</el-input>-->
                      <el-date-picker  placeholder="选择日期" v-model="giftsForm.birthtime" style="width: 220px"></el-date-picker>
                    </el-form-item>
                  </td>
                  <td >
                    <el-form-item label="入党时间">
                      <!--<el-input v-model="giftsForm.time" style="width: 220px">{{giftsForm.time}}</el-input>-->
                      <el-date-picker  placeholder="选择日期" v-model="giftsForm.time" style="width: 220px"></el-date-picker>
                    </el-form-item>
                  </td>

                </tr>
                <!--3-->
                <tr style="width: 760px">
                  <td >
                    <el-form-item label="联系方式">
                      <el-input v-model="giftsForm.iphone" style="width: 220px">{{giftsForm.iphone}}</el-input>
                    </el-form-item>

                  </td>
                  <td>
                    <el-form-item style="" label="归属支部/党委">
                      <el-select style="width: 220px;" v-model="giftsForm.belong" placeholder="请选择">
                        <el-option
                          v-for="item in options3"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </td>
                </tr>

                <tr style="width: 760px">
                  <td >
                    <el-form-item label="组织关系转入时间">
                      <!--  <el-input v-model="giftsForm.worktime" style="width: 220px">{{giftsForm.worktime}}</el-input>-->
                      <el-date-picker  placeholder="选择日期" v-model="giftsForm.worktime" style="width: 220px"></el-date-picker>
                    </el-form-item>
                    <!--<el-form-item label="手机号码">
                      <el-input v-model="giftsForm.iphone" style="width: 220px">{{giftsForm.iphone}}</el-input>
                    </el-form-item>-->
                  </td>

                </tr>
              </el-form>
            </template>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible=false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible=false">确定</el-button>
      </span>
          </el-dialog>
        </div>
    </div>
  </el-main>
</template>
<script>
    // import __ from '__' // __是需要手动引入的文件
    import Tree from './NavBasicManagerment/tree.vue'
    export default {
        name: '',
        components: {
          Tree
        },
        data () {
            return {
                search:'',
                msg: '这个是Home模板页',
              thisjob:'中兴社区一支部',
              radio: '3',
              dialogVisible: false,
//      修改
              dialogFromVisible: false,
              giftsForm:{
                name:'',
                sin:'',
                time:'',
                birthtime:'',
                worktime:'',
                belong:'',
                iphone:'',
              },
              options3: [{
                value: '镇党委',
                label: '镇党委'
              }, {
                value: '光辉村',
                label: '光辉村'
              }, {
                value: '中兴社区一支部',
                label: '中兴社区一支部'
              }, {
                value: '中兴社区党委',
                label: '中兴社区党委'
              }],

              tableData:[{
                    name:'1',
                    age:'1',
                borthertime:'1',
                time:'1',
                iphone:'1',
                address:'1',
              },{
                name:'2',
                age:'2',
                borthertime:'2',
                time:'2',
                iphone:'2',
                address:'2',
              }
              ]


            }

        },
        methods: {
          showshow:function(dass,sss){
            console.log(dass);
            this.thisjob=dass;

          },
          dialogFormVisible(){

          },
          handleClose11(done) {
            this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {
              });
          },
        },
      computed: {
        // 模糊搜索
        tableData () {
          const search = this.search
          if (search) {
            // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
            // 注意： filter() 不会对空数组进行检测。
            // 注意： filter() 不会改变原始数组。
            return this.dormitory.filter(data => {
              // some() 方法用于检测数组中的元素是否满足指定条件;
              // some() 方法会依次执行数组的每个元素：
              // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
              // 如果没有满足条件的元素，则返回false。
              // 注意： some() 不会对空数组进行检测。
              // 注意： some() 不会改变原始数组。
              return Object.keys(data).some(key => {
                // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
                // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
                return String(data[key]).toLowerCase().indexOf(search) > -1
              })
            })
          }
          return this.dormitory
        }
    },
    }
</script>
<style lang="postcss" scoped>
    body {
        background-color: #ff0000;
    }
  .lastdiv{
    margin-left: 20px;
    margin-right: 40px;
    margin-top: 30px;
  }
    .input-with-select{



      background-color: #fff;
    }
    h2{
      margin-top: 40px;
      margin-left: 30px;
    }

</style>
